<template>
  <div class="payment-success-container">
    <el-card class="success-card" shadow="hover">
      <!-- 顶部成功图标 -->
      <div class="success-icon">
        <el-icon :size="80" color="#67C23A">
          <svg viewBox="0 0 1024 1024" xmlns="http://www.w3.org/2000/svg">
            <path fill="currentColor" d="M512 64a448 448 0 1 1 0 896 448 448 0 0 1 0-896zm-55.808 536.384-99.52-99.584a38.4 38.4 0 0 0-54.336 54.336l126.72 126.72a38.272 38.272 0 0 0 54.336 0l275.2-275.2a38.4 38.4 0 0 0-54.272-54.336L456.192 600.384z"/>
          </svg>
        </el-icon>
      </div>

      <!-- 主标题 -->
      <h1 class="success-title">支付成功！</h1>

      <!-- 订单信息 -->
      <div class="order-info">
        <el-descriptions :column="1" border>
          <el-descriptions-item label="订单编号">{{ orderData.orderNo || '--' }}</el-descriptions-item>
          <el-descriptions-item label="支付金额">
            <span class="amount">¥{{ (orderData.amount || 0).toFixed(2) }}</span>
          </el-descriptions-item>
          <el-descriptions-item label="支付时间">{{ orderData.payTime || new Date().toLocaleString() }}</el-descriptions-item>
        </el-descriptions>
      </div>

      <!-- 操作按钮 -->
      <div class="action-buttons">
        <el-button type="primary" @click="viewOrder">查看订单</el-button>
        <el-button @click="backHome">返回首页</el-button>
      </div>

      <!-- 支付宝LOGO -->
      <div class="alipay-logo">
        <img src="https://img.alicdn.com/tfs/TB1QkIoBHGYBuNjy0FoXXciBFXa-226-80.png" alt="支付宝">
      </div>
    </el-card>
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue'
import { useRouter, useRoute } from 'vue-router'

const router = useRouter()
const route = useRoute()

// 初始化带默认值的订单数据
const orderData = ref({
  orderNo: route.query.out_trade_no || generateOrderNo(),
  amount: parseFloat(route.query.total_amount) || 0.01,
  productName: route.query.product_name || '测试商品',
  payTime: formatDateTime(new Date())
})

// 生成随机订单号
function generateOrderNo() {
  return 'ALI' + Date.now().toString().slice(-8)
}

// 格式化日期时间
function formatDateTime(date) {
  const options = {
    year: 'numeric',
    month: '2-digit',
    day: '2-digit',
    hour: '2-digit',
    minute: '2-digit',
    second: '2-digit',
    hour12: false
  }
  return new Intl.DateTimeFormat('zh-CN', options).format(date)
}

// 查看订单详情
const viewOrder = () => {
  if (orderData.value.orderNo) {
    router.push('/order/' + orderData.value.orderNo)
  } else {
    console.error('订单号不存在')
  }
}

// 返回首页
const backHome = () => {
  router.push('/')
}

// 打印调试信息
onMounted(() => {
  console.log('订单数据:', orderData.value)
  console.log('路由参数:', route.query)
})
</script>

<style scoped>
.payment-success-container {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 100vh;
  background-color: #f5f7fa;
  padding: 20px;
}

.success-card {
  width: 100%;
  max-width: 600px;
  text-align: center;
  border-radius: 12px;
  overflow: hidden;
}

.success-icon {
  margin: 30px 0;
  animation: bounce 1s ease;
}

@keyframes bounce {
  0%, 20%, 50%, 80%, 100% {transform: translateY(0);}
  40% {transform: translateY(-20px);}
  60% {transform: translateY(-10px);}
}

.success-title {
  color: #67C23A;
  margin-bottom: 30px;
  font-size: 28px;
}

.order-info {
  margin: 30px 0;
}

.amount {
  color: #f56c6c;
  font-weight: bold;
  font-size: 18px;
}

.action-buttons {
  margin: 30px 0;
}

.action-buttons .el-button {
  margin: 0 10px;
  width: 120px;
}

.alipay-logo {
  margin: 20px 0;
  opacity: 0.8;
}

.alipay-logo img {
  height: 30px;
}
</style>